<template>
	<view class="pageBox">
		<image src="http://www.bobei.shop/static/third/loginBg.png" mode="aspectFit" class="loginBg"
			:style="{position: 'absolute', left: 0,  top: statusBarHeight + 'px', zIndex: 1}"></image>
		<view class="content">
			<view :style="{height: statusBarHeight + 'px'}"></view>
			<view class="welcome">WELCOM YOU</view>
			<view class="helloBox">
				<view class="helloItem">
					您好，
				</view>
				<view class="helloItem">
					伯贝商城欢迎您
				</view>
			</view>

			<view class="main">
				<view class="titleBox flex-row">
					<view class="title">
						欢迎注册
					</view>
					<view class="triangle"></view>
				</view>

				<view class="iptBox flex-between">
					<input class="ipt" type="text" placeholder="请输入手机号码" v-model="form.account">
				</view>

				<view class="iptBox flex-between">
					<input class="ipt" type="text" placeholder="请输入验证码" v-model="form.captcha">
					<button class="captchaBtn" :plain="true"
						@click="sendMsg()">{{sendVerifyLoad?`${downTime}S`:'获取验证码'}}</button>
				</view>

				<view class="iptBox flex-between">
					<input class="ipt" type="text" placeholder="请输入登录密码" v-model="form.password" v-if="type == 'text'">
					<input class="ipt" type="password" placeholder="请输入登录密码" v-model="form.password" v-if="type == 'password'">
					<image class="eyes" src="http://www.bobei.shop/static/login/eyes.png" mode="" v-if="type == 'text'"
						@click="type = 'password'"></image>
					<image class="eyes" src="http://www.bobei.shop/static/login/eyes2.png" mode=""
						v-if="type == 'password'" @click="type = 'text'"></image>
				</view>

				<view class="iptBox flex-between">
					<input class="ipt" type="text" placeholder="请再次确认登录密码" v-model="form.password2" v-if="type2 == 'text'">
					<input class="ipt" type="password" placeholder="请再次确认登录密码" v-model="form.password2" v-if="type2 == 'password'">
					<image class="eyes" src="http://www.bobei.shop/static/login/eyes.png" mode="" v-if="type2 == 'text'"
						@click="type2 = 'password'"></image>
					<image class="eyes" src="http://www.bobei.shop/static/login/eyes2.png" mode=""
						v-if="type2 == 'password'" @click="type2 = 'text'"></image>
				</view>

				<view class="iptBox flex-between">
					<input class="ipt" type="text" placeholder="请输入支付密码" v-model="form.safeword" v-if="type3 == 'text'">
					<input class="ipt" type="password" placeholder="请输入支付密码" v-model="form.safeword" v-if="type3 == 'password'">
					<image class="eyes" src="http://www.bobei.shop/static/login/eyes.png" mode="" v-if="type3 == 'text'"
						@click="type3 = 'password'"></image>
					<image class="eyes" src="http://www.bobei.shop/static/login/eyes2.png" mode=""
						v-if="type3 == 'password'" @click="type3 = 'text'"></image>
				</view>

				<view class="iptBox flex-between">
					<input class="ipt" type="text" placeholder="请输入再次确认支付密码" v-model="form.safeword2" v-if="type4 == 'text'">
					<input class="ipt" type="password" placeholder="请输入再次确认支付密码" v-model="form.safeword2" v-if="type4 == 'password'">
					<image class="eyes" src="http://www.bobei.shop/static/login/eyes.png" mode="" v-if="type4 == 'text'"
						@click="type4 = 'password'"></image>
					<image class="eyes" src="http://www.bobei.shop/static/login/eyes2.png" mode=""
						v-if="type4 == 'password'" @click="type4 = 'text'"></image>
				</view>

				<view class="iptBox flex-between">
					<input class="ipt" type="text" placeholder="请输入您的昵称" v-model="form.nickname">
				</view>

				<view class="iptBox flex-between">
					<input class="ipt" type="text" placeholder="请输入邀请码" v-model="form.inviteCode" :disabled="disabled">
					<view class="optionalFilling">
						（选填）
					</view>
				</view>

				<view class="agree flex-center">
					<image class="checkIcon" src="http://www.bobei.shop/static/third/checkIcon.png" mode=""
						v-if="!checked" @click="checked = true"></image>
					<image class="checkIcon" src="http://www.bobei.shop/static/third/checkedIcon.png" mode=""
						v-if="checked" @click="checked = false"></image>
					<view class="agreeText">
						注册即同意
					</view>
					<button class="agreement" :plain="true"
						@click.stop="goAbout('/setting/about?name=service_agreement&title=用户协议')">《用户协议》</button>
					<view class="agreeText">
						和
					</view>
					<button class="agreement" :plain="true"
						@click.stop="goAbout('/setting/about?name=privacy_policy&title=隐私协议')">《隐私协议》</button>
				</view>

				<button class="regBtn" :plain="true" @click="onRegBtn">注册</button>

				<view class="have flex-center">
					<button class="nowBtn" :plain="true" @click="goLogin">立即登录</button>
					<view class="line"></view>
					<button class="hadBtn" :plain="true" @click="goLogin">已有帐号？</button>
				</view>



			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: "",
				form: {
					account: "",
					captcha: "",
					password: "",
					password2: "",
					safeword: "",
					safeword2: "",
					nickname: "",
					inviteCode: "",
				},
				inviteCode: "",
				type: "password",
				type2: "password",
				type3: "password",
				type4: "password",
				checked: false,
				disabled: false,

				sendVerifyLoad: "",
				downTime: 60,
			}
		},
		onLoad(e) {
			this.form.inviteCode = uni.getStorageSync('inviteCode') ? uni.getStorageSync('inviteCode') : "";
			this.disabled = uni.getStorageSync('inviteCode') ? true : false;
			// this.form.inviteCode this.disabled 赋值完毕 删除本地缓存
			uni.removeStorageSync('inviteCode');
			
			this.inviteCode = e.inviteCode ? e.inviteCode : "";
			if(this.inviteCode) {
				this.form.inviteCode = this.inviteCode;
			}
		},

		onShow() {
			this.statusBarHeight = this.$mySysInfo().top;
		},

		methods: {
			goLogin() {
				uni.navigateTo({
					url: "/pages/login/index"
				})
			},
			goAbout(url) {
				uni.navigateTo({
					url: url
				})
			},
			sendMsg() {
				if (!this.form.account) {
					uni.showToast({
						title: '请输入手机号',
						icon: "none",
						duration: 1500,
					})
					return
				}
				if (this.sendVerifyLoad) {
					uni.showToast({
						title: `请等待${this.downTime}s后继续操作`,
						icon: "none",
						duration: 1500,
					})
					return
				}
				this.sendVerifyLoad = true


				this.$post({
					module: 'Account',
					interface: 1001,
					data: {
						account: this.form.account
					}
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500,
					})
					let time = setInterval(() => {
						this.downTime--;
						if (this.downTime <= 0) {
							this.downTime = 60;
							this.sendVerifyLoad = false;
							clearTimeout(time);
						}
					}, 1000);
				}).catch(() => {
					this.sendVerifyLoad = false
				})
			},
			onRegBtn() {
				if (!this.form.account) {
					uni.showToast({
						title: '请输入手机号',
						icon: "none",
						duration: 1500,
					})
					return
				}
				if (!this.form.captcha) {
					uni.showToast({
						title: '请输入验证码',
						icon: "none",
						duration: 1500,
					})
					return
				}
				if (!this.form.password) {
					uni.showToast({
						title: '请输入登录密码',
						icon: "none",
						duration: 1500,
					})
					return
				}
				if (!this.form.password2) {
					uni.showToast({
						title: '请再次输入登录密码',
						icon: "none",
						duration: 1500,
					})
					return
				}

				if (this.form.password != this.form.password2) {
					uni.showToast({
						title: '登录密码输入不一致',
						icon: "none",
						duration: 1500,
					})
					return
				}

				if (!this.form.safeword) {
					uni.showToast({
						title: '请输入支付密码',
						icon: "none",
						duration: 1500,
					})
					return
				}

				if (this.form.safeword) {
					let isSixNum = this.safepassReg(this.form.safeword);
					if (!isSixNum) {
						uni.showToast({
							title: '支付密码为六位数字',
							icon: "none",
							duration: 1500,
						})
						return
					}
				}

				if (!this.form.safeword2) {
					uni.showToast({
						title: '请再次输入支付密码',
						icon: "none",
						duration: 1500,
					})
					return
				}
				if (this.form.safeword != this.form.safeword2) {
					uni.showToast({
						title: '支付密码输入不一致',
						icon: "none",
						duration: 1500,
					})
					return
				}
				if (!this.form.nickname) {
					uni.showToast({
						title: '请输入您的昵称',
						icon: "none",
						duration: 1500,
					})
					return
				}
				if (!this.checked) {
					uni.showToast({
						title: '请阅读并同意后勾选《用户协议》和《隐私协议》',
						icon: "none",
						duration: 1500,
					})
					return
				}
				
				
				this.$post({
					module: "Account",
					interface: 1002,
					data: this.form
				}).then(res => {
					// console.log(res);
					uni.showToast({
						title: '注册成功',
						icon: "none",
						duration: 1500,
					})
					uni.setStorageSync('token', res.accessToken);
					this.disabled = false;
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/index'
						})
					}, 1000)
				})
			},
			// 六位数安全密码正则验证
			safepassReg(param) {
				let reg = /^[0-9]{6,6}$/g;
				if (reg.test(param)) {
					return true;
				}
				return false;
			},
		},
	}
</script>

<style scoped lang="scss">
	.pageBox {
		width: 100%;
		min-height: calc(100vh - var(--window-top));
		background: linear-gradient(180deg, #EC615C 0%, #FFFFFF 100%);
		position: relative;

		.loginBg {
			width: 100%;
			transform: rotate(180deg);
		}

		.content {
			position: relative;
			z-index: 2;
			padding: 112rpx 0 0;

			.welcome {
				font-size: 72rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 84rpx;
				-webkit-box-reflect: below -30% -webkit-linear-gradient(transparent, transparent 30%, rgba(0, 0, 0, .8)); // 倒影
				padding-left: 46rpx;
			}

			.helloBox {
				margin-top: 20rpx;
				padding-left: 46rpx;

				.helloItem {
					font-size: 56rpx;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: 600;
					color: #000000;
					line-height: 66rpx;
				}
			}

			.main {
				height: 1242rpx;
				background: rgba(255, 255, 255, 0.2);
				border: 4rpx solid #FFFFFF;
				border-radius: 16rpx 16rpx 0 0;
				margin-top: 10rpx;

				.titleBox {
					margin: 66rpx 0 40rpx 60rpx;

					.title {
						font-size: 36rpx;
						font-family: PingFang SC-Semibold, PingFang SC;
						font-weight: 600;
						color: #000000;
						line-height: 42rpx;
					}

					.triangle {
						width: 0;
						height: 0;
						border-top: 10rpx solid #000000;
						border-right: 10rpx solid transparent;
						border-left: 10rpx solid transparent;
						margin-left: 16rpx;
					}
				}

				.iptBox {
					width: 630rpx;
					height: 72rpx;
					background: rgba(255, 255, 255, 0.7);
					border-radius: 50rpx;
					margin: 0 auto 16rpx;
					padding: 0 50rpx;

					.ipt {
						flex: 1;
						font-size: 24rpx;
						font-weight: normal;
						font-family: PingFang SC-Semibold, PingFang SC;
						color: #999999;
						line-height: 28rpx;
						outline: none;
						border: none;
						background-color: transparent;
					}

					.captchaBtn {
						font-size: 20rpx;
						font-family: PingFang SC-Semibold, PingFang SC;
						font-weight: normal;
						color: #F2615F;
						line-height: 23rpx;
						background-color: transparent;
						border-radius: 23rpx 23rpx 23rpx 23rpx;
						border: 2rpx solid #F2615F;
						white-space: nowrap;
						padding: 4rpx 16rpx 2rpx;
						margin: 0;
					}

					.eyes {
						width: 40rpx;
						height: 40rpx;
					}

					.optionalFilling {
						font-size: 24rpx;
						font-weight: normal;
						font-family: PingFang SC-Semibold, PingFang SC;
						color: #999999;
						line-height: 28rpx;
					}
				}

				.agree {
					margin-top: 60rpx;

					.checkIcon {
						width: 44rpx;
						height: 44rpx;
					}

					.agreeText {
						font-size: 24rpx;
						font-family: PingFang SC-Semibold, PingFang SC;
						font-weight: normal;
						color: #CBCBCB;
						line-height: 28rpx;
					}

					.agreeText:nth-of-type(1) {
						margin-left: 16rpx;
					}

					.agreeText:nth-of-type(2) {
						margin-left: 24rpx;
					}

					.agreement {
						font-size: 24rpx;
						font-family: PingFang SC-Semibold, PingFang SC;
						font-weight: normal;
						color: #F2615F;
						line-height: 28rpx;
						border: none;
						padding: 0;
						margin: 0;
					}

					.agreement:nth-of-type(1) {
						margin-left: 20rpx;
					}

					.agreement:nth-of-type(2) {
						margin-left: 4rpx;
					}
				}

				.regBtn {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 33rpx;
					width: 480rpx;
					height: 80rpx;
					background: #EC615C;
					border-radius: 40rpx;
					border: none;
					margin: 40rpx auto 0;
					padding: 0;
				}

				.have {
					margin-top: 32rpx;

					.nowBtn {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #F2615F;
						line-height: 33rpx;
						background: transparent;
						border: none;
						margin: 0;
						padding: 0;
					}

					.line {
						width: 2rpx;
						height: 18rpx;
						background-color: #A1AAB4;
						margin: 0 24rpx;
					}

					.hadBtn {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #120C45;
						line-height: 33rpx;
						background: transparent;
						border: none;
						margin: 0;
						padding: 0;
					}
				}

			}


		}
	}
</style>
